<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}"
      @searchReset="searchReset()">
      <el-col :span="6">
        <el-form-item :label="$t('user.username')">
          <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('user.realName')">
          <el-input v-model="dataForm.realName" :placeholder="$t('user.realName')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('user.userType')">
          <el-select v-model="dataForm.userType" :placeholder="$t('user.userType')" clearable>
            <el-option v-for="template in $getDictList('SYS_USER_TYPE', false)" :key="template.val"
              :label="template.label" :value="template.val"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        </template>
      </vxe-toolbar>
      <div>
      <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
        remote-sort @sort-change="dataListSortChangeHandle" @select-change="dataListSelectionChangeHandleVex"
        @select-all="dataListSelectionAllChangeHandleVex" max-height="auto">
        <!-- <vxe-table-column type="checkbox" width="50" align="center"></vxe-table-column> -->
        <vxe-table-column type="index" width="50" fixed="left" align="center"></vxe-table-column>
        <vxe-table-column field="username" title="user.username" sortable width="150" :show-overflow="true">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
            <i v-if="scope.row.superAdmin.toString() == '2'" class="icon_user_admin">
              <el-tag type="success" size="mini" effect="dark">管理员</el-tag>
            </i>
            <i v-if="scope.row.superAdmin.toString() == '1'" class="el-icon-bell icon_user_admin">
            </i>
          </template>
        </vxe-table-column>
        <vxe-table-column field="realName" title="user.realName" width="auto" align="center"></vxe-table-column>
        <vxe-table-column field="deptName" title="user.deptName" width="auto" align="center"></vxe-table-column>
        <vxe-table-column field="mobile" title="user.mobile" sortable width="auto" align="center"></vxe-table-column>
        <vxe-table-column field="email" title="user.email" width="auto"></vxe-table-column>
        <vxe-table-column field="status" title="user.status" sortable width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
            <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column field="createDate" title="user.createDate" sortable width="140" align="center">
        </vxe-table-column>
        <vxe-table-column title="handle" width="70" align="center" :show-overflow="false">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="small" @click="openUserDataScope(scope.row.id)">{{ '查看' }}
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      </div>
      <UserDataScope v-if="userDataScopeVisible" ref="userDataScope"></UserDataScope>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import UserDataScope from './user-datascope'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      userDataScopeVisible: false,
      mixinViewModuleOptions: {
        getDataListURL: '/sys/user/page',
        getDataListIsPage: true
      },
      initDataForm: {
        hasCustrule: true
      },
      dataForm: {
        username: '',
        realName: '',
        userType: '',
        hasCustrule: ''
      }
    }
  },
  components: {
    UserDataScope
  },
  created () {
    this.searchReset()
  },
  methods: {
    openUserDataScope (id) {
      this.userDataScopeVisible = true
      this.$nextTick(() => {
        this.$refs.userDataScope.userId = id
        this.$refs.userDataScope.init()
      })
    }
  }
}
</script>

<style scoped>
.el-tag--mini {
  margin: 0 2px;
  padding: 0 2px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
</style>
